<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.code" placeholder="收银标识" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-waves :loading="listLoading" class="filter-item" type="primary" icon="el-icon-refresh" @click="reset">
        重置
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <el-table-column label="收银标识/收银名称" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.code }} - {{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="收银员">
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}</span>
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商户标识/商户名称" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.merchantCode }} - {{ scope.row.merchantName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="收银操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="merchantCollection(scope)">收银</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="showOrder(scope)">查询交易明细</el-button>
          <el-button v-waves :loading="listLoading"  type="danger" size="small" @click="downloadCode(scope)">下载收款码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />

    <el-dialog :visible.sync="dialogVisible">
        <el-form ref="form" :model="form" :rules="formRules" label-width="120px">
          <el-form-item label="输入金额" prop="amount">
            <el-input
              ref="amount"
              v-model="form.amount"
              placeholder="金额"
              name="amount"
              type="number"
              tabindex="1"
              auto-complete="on"
              v-focus
              @keyup.enter.native="authCodeFocus"
            />
          </el-form-item>

          <el-form-item label="扫支付码" prop="auth_code">
            <el-input
              ref="auth_code"
              v-model="form.auth_code"
              placeholder="编码"
              name="auth_code"
              type="text"
              tabindex="1"
              auto-complete="on"
              @keyup.enter.native="payCode"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">收银</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>
<script>

import { getQrcodePage } from '@/api/qrcode'
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'
import { pay } from '@/api/pay'

export default {
  name: 'Checkstand',
  computed: {
    ...mapGetters([
      'merchant_code',
      'user_id'
    ])
  },
  components: { Pagination },
  directives: { waves },
  data() {
    const validateMoney = (rule, value, callback) => {
      console.log('module/pay -> validateMoney =>' + value)
      if (!value) {
        callback(new Error('金额输入有误'))
      } else if (value.split('.')[1].length > 2) {
        // 防止输入多个小数点
        callback(new Error('最多两位小数'))
      } else {
        callback()
      }
    }
    return {
      listLoading: true,
      dialogVisible: false,
      list: null,
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        merchantCode: null,
        code: null
      },
      form: {
        amount: '',
        auth_code: ''
      },
      formRules: {
        amount: [
          { required: false, tigger: 'blur', validator: validateMoney }
        ]
      },
      collect: {
        'rq_code': null,
        'amount': null,
        'client_type': 'ac',
        'auth_code': null,
        'user_id': null
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.listQuery.merchantCode = this.merchant_code
      getQrcodePage(this.listQuery).then(response => {
        this.list = response.rows
        this.total = response.total
        this.listLoading = false
      })
    },
    merchantCollection(scope) {
      this.collect.rq_code = scope.row.code
      this.dialogVisible = true
    },
    showOrder(scope) {
      this.$router.push({
        name: 'OrderList',
        params:
          {
            rqCode: scope.row.code
          }
      })
    },
    downloadCode(scope) {
      this.listLoading = true;
      window.location.href = 'http://customer.yymcd.com/c/d/' + scope.row.code + '.png'
      this.listLoading = false;
    },
    reset() {
      this.listQuery.code = null
      this.handleFilter()
    },
    handleFilter() {
      this.listQuery.pageSize = 1
      this.fetchData()
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.collect.amount = this.form.amount
          this.collect.auth_code = this.form.auth_code
          this.collect.user_id = this.user_id

          console.log(this.collect)
          pay(this.collect).then(res => {
            if (res != null && res.code === 0) {
              if (res.data.pay_status === 'FAIL') {
                this.gm_error('支付失败 -> 失败信息' + JSON.stringify(res.data))
              } else {
                this.gm_error('支付失败')
              }
            } else {
              this.gm_error(JSON.stringify(res))
            }
          })
        } else {
          this.$message({
            message: 'cancel!',
            type: 'warning'
          })
          return false
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  .app-container {
    .roles-table {
      margin-top: 30px;
    }
    .permission-tree {
      margin-bottom: 30px;
    }
  }
</style>
